<template>
	<view>
		<!-- bgColor='transparent' -->
		<u-popup :show="show" @close="close" mode="top" z-index="9">
			<slot name="top"></slot>
			<view class="flex  u-p-l-28">
				<scroll-view class="list-1" scroll-y>
					<view class="list-1-item flex-c" :class="{is_aCtive:index===state.chooseArr[0]}"
						@tap="firstDataDeb(item,index)" v-for="(item,index) in DATA_STORE.addressInfo" :key="index">
						<text class="u-line-1">{{item.name}}</text>
						<u-icon v-if="index===state.chooseArr[0]" name="checkbox-mark" :color="$main_color"
							size="20"></u-icon>
					</view>
				</scroll-view>
				<scroll-view class="list-1" scroll-y>
					<view class="list-1-item flex-c" :class="{is_aCtive:index===state.chooseArr[1]}"
						@tap="secondDataDeb(item,index)" v-for="(item,index) in getSecondData" :key="index">
						<text class=" u-line-1">{{item.name}}</text>
						<u-icon v-if="index===state.chooseArr[1]" name="checkbox-mark" :color="$main_color"
							size="20"></u-icon>
					</view>
				</scroll-view>
				<!-- 	<scroll-view class="list-1" scroll-y>
					<view class="list-1-item  flex-c-c" :class="{is_aCtive:index===state.chooseArr[2]}"
						@tap="third(index)" v-for="(item,index) in getThird" :key="index">
						<text class=" u-line-1">{{item.name}}</text>
						<u-icon v-if="index===state.chooseArr[2]" name="checkbox-mark" :color="$main_color"
							size="20"></u-icon>
					</view>
				</scroll-view> -->
			</view>
			<!-- 	<view class="submit-class flex-c-c">
				<view class="b-1 flex-c-c" @tap="state.chooseArr=['','',''],emits('submit', [null, null, null])">
					重 置
				</view>
				<view class="b-2 flex-c-c" @tap="submit">
					确认
				</view>
			</view>
	 -->
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from "vue"
	import {
		onUnload,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		debounce,
		isNumber
	} from "lodash"
	const state = reactive({
		chooseArr: []
	})
	const emits = defineEmits(['submit', 'close'])
	defineProps({
		show: Boolean
	})
	const DATA_STORE = uni.$store('data')
	const close = (e) => {
		emits('close')
	}
	onLoad(() => {
		if (!DATA_STORE.addressInfo) {
			uni.$u.http.post('/index/getCategory', {
				pid: 14
			}).then((res) => {
				// let list = [{
				// 	name: '全部',
				// 	id: '',
				// 	children: [{
				// 		name: '全部',
				// 		id: '',
				// 	}]
				// }, ...res.data]
				DATA_STORE.addressInfo = res.data;
				!DATA_STORE.currentAddressInfo &&
					(DATA_STORE.setCurrentAddressInfo(res.data[0]))

			})
		}
	})
	const getSecondData = computed(() => {
		try {
			let findItem = DATA_STORE.addressInfo[state.chooseArr[0]]
			return findItem?.children
		} catch (e) {
			return []
		}
	})
	const getThird = computed(() => {
		try {
			return DATA_STORE.
			addressInfo[state.chooseArr[0]]?.
			children[state.chooseArr[1]]?.
			children
		} catch (e) {
			return []
		}
	})

	const firstDataDeb = debounce(async (item, index) => {
		state.chooseArr = [index, '', '']
		triggert()
		return

		if (!DATA_STORE.addressInfo[index].children) {
			let list = await getCityInfo(item.id)
			DATA_STORE.addressInfo[index].children = list.data
		}
	}, 500, {
		'leading': true,
	})
	const secondDataDeb = debounce(async (item, index) => {
		state.chooseArr = [state.chooseArr[0], index]

		triggert()
		// if (!DATA_STORE.addressInfo[state.chooseArr[0]].children[index].children) {
		// 	let list = await getCityInfo(item.code)
		// 	DATA_STORE.addressInfo[state.chooseArr[0]].children[index].children = list
		// }
	}, 500, {
		'leading': true,
	})
	const third = (index) => {
		state.chooseArr[2] = index
	}

	const triggert = () => {
		let [first, second] = state.chooseArr
		if (isNumber(first)) {
			let firstData = DATA_STORE.addressInfo[first]
			// let secondData = isNumber(second) ? getSecondData.value[second] : null
			// let ThirdData = isNumber(Thirdindex) ? getThird.value[Thirdindex] : null
			DATA_STORE.setCurrentAddressInfo(firstData)
			emits('submit', [firstData])
		}
	}

	const getCityInfo = (pid) => {
		return uni.$u.http.post('/index/getCategory', {
			pid
		}, {
			custom: {
				showmask: true
			}
		})
	}
</script>
<style lang="scss" scoped>
	.submit-class {
		width: 100%;
		height: 156rpx;
		border-top: 1px solid #736F6F;

		&>view {
			width: 174rpx;
			height: 67rpx;
			border-radius: 5rpx;
			margin: 0 50rpx;
		}

		.b-1 {
			font-size: 32rpx;
			font-family: DFHei-Md-80-Win-GB;
			color: #222222;
			border: 2px solid #5E5E5E;
			border-radius: 12rpx;
		}

		.b-2 {
			border: 2px solid #C0690B;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: DFHei-Md-80-Win-GB;
			color: #C0690B;
		}
	}

	.areasearch {
		width: 544rpx;
		height: 68rpx;
		border: 1px solid #736F6F;
		border-radius: 16rpx;
		margin-left: 53rpx;
		margin-bottom: 50rpx;
	}

	.uni-input {
		width: 244rpx;
		height: 68rpx;
		border: 1px solid #736F6F;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-family: DFHei-Md-80-Win-GB;
		font-weight: 400;
		color: #5F5F5F;
	}

	.list-1 {
		padding-bottom: 20rpx;
		width: 50%;
		height: 70vh;

		.list-1-item {
			text-align: left;
			height: 94rpx;
			font-size: 28rpx;
			font-family: DFHei-Md-80-Win-GB;
			color: #666666;
			padding-left: 22rpx;

		}

		.is_aCtive {
			color: $main_color;
		}
	}

	.list-2 {
		padding-bottom: 0;

		.list-2-item {
			width: 144rpx;
		}
	}

	.view-1 {
		width: 750rpx;
		border-top: 1px solid #ACACAC;
		padding: 18rpx 37rpx 20rpx;
		font-size: 29rpx;
		font-family: DFHei-Md-80-Win-GB;
		color: #222222;

		image {
			margin-top: -4rpx;
			margin-right: 10rpx;
		}
	}

	.borderno {
		border: none;
		padding-top: 0;
	}
</style>